<template>
	<el-row class="container">
		<!-- 顶部区域 -->
		<el-col :span="24">
			<el-header class="header">
				<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
					<div class="logo">
						<!-- <img src="../assets/logo.png"/> -->
						<img src="../../static/images/logo.jpg"/>
						<span>谷太商城</span>
					</div>
				</el-col>
				<el-col :span="16">
					<!--<span class="list" @click="logout">
						<i class="iconfont icon-logout"></i> {{$t('appMes.quit')}}</span>
					<span class="list">
						Hi, {{userName}}
					</span>-->
				</el-col>
				<el-col :span="4" class="userinfo">
					<el-dropdown trigger="hover">
						<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>我的消息</el-dropdown-item>
							<el-dropdown-item>设置</el-dropdown-item>
							<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-col>
			</el-header>
		</el-col>
		
		<el-col :span="24" class="main">
			<!-- 左侧菜单栏 -->
			<el-aside width="200px" :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!-- 注意需要给 el-scrollbar 设置高度，判断是否滚动是看它的height判断的 -->
    			<el-scrollbar style="height: 100%;"> <!-- 滚动条 -->
    				<div ref="leftMenu" style="height: 0px;">
						<el-menu :default-active="$route.path" class="menu" router background-color="#324157" text-color="#bfcbd9">
							<submenu v-for="(item,index) in $router.options.routes" v-if="!item.hidden"
								 :key="item.name" :index="index" :item="item" @selected="selected" />
						</el-menu>
					</div>
				 </el-scrollbar><!-- /滚动条 -->
				<!--<i class="el-icon-d-arrow-left menu-expand" @click="isMiniMenu = !isMiniMenu"></i>-->
				
				
				<!--导航菜单-->
				<!--<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" 
					 unique-opened router v-show="!collapsed" background-color="#324157" text-color="#bfcbd9">
					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
						<el-submenu :index="index+''" v-if="!item.leaf">
							<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
					</template>
				</el-menu>-->
				<!--导航菜单-折叠后-->
				<!--<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
					<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
						<template v-if="!item.leaf">
							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> 
								<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
							</ul>
						</template>
						<template v-else>
							<li class="el-submenu">
								<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
							</li>
						</template>
					</li>
				</ul>-->
			</el-aside>
			<!-- 主体内容区域 -->
			<section class="panel-container">  <!--"content-container"-->
				<div class="grid-content page-wrap-tabs"> <!--bg-purple-light-->
					<el-tabs type="card" closable v-model="tab" router @tab-click="handleClick" @tab-remove="handleRemove" :active-name="tab" class="outer-tabs">
						<el-tab-pane v-for="(item, index) in tabs" :key="item.path" :label="item.title" :name="item.name">
							<div :is="item.component"></div>
							<!--<div :is="item.name" @page="createTab"></div>-->
							<!--<router-view :key="tab"></router-view>-->
							<!--<router-view></router-view>-->
						</el-tab-pane>
					</el-tabs>
					
					<!--<el-col :span="24" class="breadcrumb-container">
						<strong class="title">{{$route.name}}</strong>
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>-->
				</div>
			</section>
		</el-col>
	</el-row>
</template>

<script>
	import submenu from './submenu'
	const homePage= {
		title: 'homePage',
		name: 'homePage',
		content: '/main',
		btns: {}
	}
	export default {
		data() {
			return {
				tabs: [],
				tab: '',
				menu: [],
				/*userName:'ADMIN',*/
				collapsed:false,
				sysUserName: 'ADMIN',
				sysUserAvatar: '',
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				windowHeight:''
			}
		},
		components: {
			submenu
		},
		computed:{
			/**
			 * @author：01367604
			 * @function: 设置窗口高度，添加滚动条
			 * @pramas: 
			 */
			setWindowHeight(){
				return function (){
					this.windowHeight =  `${document.documentElement.clientHeight}` ;
					console.log(this.windowHeight);
//					document.getElementById('leftMenu').style.height = this.windowHeight + 'px';
					window.onresize = function temp() {
				        this.windowHeight = `${document.documentElement.clientHeight}`;
				    };
				}
			}
		},
		watch: {
//	      // 如果 `clientHeight` 发生改变，这个函数就会运行
	      windowHeight: function () {
	        console.log(this.windowHeight);
        	this.$refs.leftMenu.style.height = (this.windowHeight- 80)+'px';
	      }
	    },
		methods: {
			onSubmit() {
//				console.log('submit!');
			},
			handleopen() {
//				console.log('handleopen');
			},
			handleclose() {
//				console.log('handleclose');
			},
			//退出登录
			logout: function () {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {
					sessionStorage.removeItem('user');
					_this.$router.push('/login');
				}).catch(() => {

				});


			},
			//折叠导航栏
//			collapse:function(){
//				this.collapsed=!this.collapsed;
//			},
			showMenu(i,status){
				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
			},
			handleClick(tab, event) {
				this.tab = tab.name
//				console.log('active tab is '+ this.tab);
//				this.$router.push({path: tab.path});
			},
			handleRemove(targetName) {
//				console.log('handleRemove! activeName: '+ this.tab + ', want removed:' +targetName);
//				if (targetName === 'homePage'){
//					return
//				}
				let tabs = this.tabs
				let activeName = this.tab
				if(activeName === targetName) {
					tabs.forEach((tab, index) => {
						if(tab.name === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1]
							if(nextTab) {
								activeName = nextTab.name
							}
						}
					})
				}
				this.tab = activeName
				this.tabs = tabs.filter(tab => tab.name !== targetName)
//				console.log(this.tabs);
			},
			selected(tab, tabName) {
//				console.log(tab);
				for(let [index, item] of this.tabs.entries()) {
					if(item.name == tabName) {
						this.tab = tabName
						return
					}
				}
				this.tabs.push({
					'title': tab.title,
					'name': tabName,
					'content': tab.path,
					'component': tab.component,
					'btns': {}
				})
				this.tab = tabName
//				console.log('selected! activeName: ' + this.tab);
//				console.log(this.tabs);
//				this.queryBtns(moduleId, this.tabs[this.tabs.length - 1]) //查询新页面的按钮权限
			}
		},
		mounted() {
			var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.sysUserName = user.name || '';
				this.sysUserAvatar = user.avatar || '';
			}
			this.setWindowHeight();
		}
	}
</script>

<style scoped lang="scss">
	@import '~scss_vars';
	
	.el-tabs__nav .el-tabs__item:nth-child(1) span{
		display: none;
	}
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.header {
			height: 60px;
			line-height: 60px;
			background: $color-primary;
			color:#fff;
			.userinfo {
				text-align: right;
				padding-right: 35px;
				float: right;
				.userinfo-inner {
					cursor: pointer;
					color:#fff;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
			.logo {
				//width:230px;
				height:60px;
				font-size: 22px;
				padding-left:0px;
				padding-right:20px;
				border-color: rgba(238,241,146,0.3);
				border-right-width: 1px;
				border-right-style: solid;
				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color:#fff;
				}
			}
			.logo-width{
				width:230px;
			}
			.logo-collapse-width{
				width:60px
			}
			.tools{
				padding: 0px 23px;
				width:14px;
				height: 60px;
				line-height: 60px;
				cursor: pointer;
			}
		}
		.main {
			display: flex;
			// background: #324057;
			position: absolute;
			top: 60px;
			bottom: 0px;
			overflow: hidden;
			aside {
				flex:0 0 230px;
				width: 230px;
				// position: absolute;
				// top: 0px;
				// bottom: 0px;
				.el-menu{
					height: 100%;
				}
				.collapsed{
					width:60px;
					.item{
						position: relative;
					}
					.submenu{
						position:absolute;
						top:0px;
						left:60px;
						z-index:99999;
						height:auto;
						display:none;
					}

				}
			}
			.menu-collapsed{
				flex:0 0 60px;
				width: 60px;
			}
			.menu-expanded{
				flex:0 0 230px;
				width: 230px;
			}
			.content-container {
				// background: #f1f2f7;
				flex:1;
				// position: absolute;
				// right: 0px;
				// top: 0px;
				// bottom: 0px;
				// left: 230px;
				overflow-y: scroll;
				padding: 20px;
				.breadcrumb-container {
					//margin-bottom: 15px;
					.title {
						width: 200px;
						float: left;
						color: #475669;
					}
					.breadcrumb-inner {
						float: right;
					}
				}
				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
				}
			}
			.panel-container {
				border-left: 1px solid #eee;
			}
		}
	}
	/*tabs标签页*/
	.outer-tabs.el-tabs--card>.el-tabs__header {
		margin-top: 10px;
	}
	
	.outer-tabs.el-tabs--card>.el-tabs__header .el-tabs__item {
		border: 1px solid #EEF1F6;
		position: relative;
		border-radius: 0;
		height: 32px;
		line-height: 32px;
		margin-right: 8px;
		background: #EEF1F6;
	}
	
	.outer-tabs.el-tabs--card>.el-tabs__header .el-tabs__item:before {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		right: -16px;
		border-bottom: 31px solid #EEF1F6;
		border-right: 15px solid transparent;
	}
	
	.outer-tabs.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
		background-color: #20A0FF;
		color: #fff;
		border-color: #20A0FF;
	}
	
	.outer-tabs.el-tabs--card>.el-tabs__header .el-tabs__item.is-active:before {
		border-bottom-color: #20A0FF;
		transition: all .3s cubic-bezier(.645, .045, .355, 1);
	}
	
	.outer-tabs.el-tabs--card>.el-tabs__header .el-tabs__item.is-active:after {
		content: none;
	}
	
	/*.el-scrollbar__wrap {
	  overflow-x: hidden;
	}*/
	.el-scrollbar__wrap {
	    overflow: {
	    	overflow-x: hidden;
	    	overflow-y: scroll;
	    };
	    height: 100%;
	}
</style>